<template>
  <div>
    <Search :labels="labels" @searchWareHouse="searchWareHouse" />
    <el-card class="table">
      <el-button type="success" round class="addBtn" @click="$router.push('/information/addWareHouse')">新增仓库</el-button>
      <el-table
        :data="wareHouseData"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="150"
          align="center"
        />
        <el-table-column
          prop="code"
          label="仓库编码"
          width="120"
          align="center"
        />
        <el-table-column
          prop="name"
          label="仓库名称"
          width="120"
          align="center"
        />
        <el-table-column
          prop="type"
          label="仓库类型"
          width="120"
          align="center"
          :formatter="formatterType"
        />
        <el-table-column
          prop="location"
          label="省/市/区"
          width="300"
          align="center"
        />
        <el-table-column
          prop="address"
          label="详细地址"
          width="180"
          align="center"
        />
        <el-table-column
          prop="status"
          label="仓库状态"
          width="120"
          align="center"
          :formatter="formatterStatus"
        />
        <el-table-column
          prop="surface"
          label="仓库面积"
          width="120"
          align="center"
        />
        <el-table-column
          prop="includedNum"
          label="库区数量"
          width="120"
          align="center"
        />
        <el-table-column
          prop="personName"
          label="负责人"
          width="120"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120"
          align="center"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
          align="center"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`/information/editWareHouse/${row.id}`)">编辑</el-button>
            <el-button type="text" size="small" @click="editStatus(row.id,row.status,row.name)">{{ formatterStatus('','',row.status === 0 ? 1 : 0) }}</el-button>
            <el-button type="text" size="small" @click="delWareHouse(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能组件 -->
      <template>
        <el-pagination
          :current-page.sync="total"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
      <!-- 分页功能组件 -->
    </el-card>
  </div>
</template>

<script>
// 导入顶部搜索框组件
import Search from '@/views/information/components/Search'
// 导入表格组件
// import Tables from '@/views/information/components/tables'
// 导入获取仓库信息相关接口
import { getPageWareHouseAPI, updateWareHouserAPI, delWareHouseAPI } from '@/api/wareHouse'
export default {
  components: {
    Search
    // Tables
  },
  data() {
    return {
      // 公共搜索组件字段
      labels: {
        warehouseCode: '仓库编号',
        areaName: '仓库名称',
        status: '仓库状态',
        isShowInput: false,
        isShowSelect: true
      },
      // 暂存仓库分页数据，用于传递给公共表格组件
      wareHouseData: [],
      filterData: [],
      // 分页数据
      total: undefined,
      size: undefined
    }
  },
  created() {
    this.getPageWareHouse()
  },
  methods: {
    // 渲染仓库数据
    async getPageWareHouse() {
      const { data } = await getPageWareHouseAPI()
      // 暂存请求返回的仓库信息数据
      this.wareHouseData = data.data.records
      // 同步筛选数据，用户查询
      this.filterData = data.data.records
      // 获取仓库数据总数
      this.total = +data.data.total
      // 获取每页显示数量
      this.size = +data.data.size
    },
    // 搜索功能实现
    searchWareHouse(data) {
      // 筛选数据返回给渲染表格数组
      this.wareHouseData = this.filterData.filter(item => {
        const isCodeOK = item.code.includes(data.name)
        const isNameOK = item.name.includes(data.areaName)
        const isStatusOK = item.status === data.areaStatus || data.areaStatus === 2
        return isCodeOK && isNameOK && isStatusOK
      })
    },
    // 编辑仓库信息
    editWareHouse(id) {
      console.log(id)
    },
    // 修改仓库状态
    async editStatus(id, status, name) {
      try {
        // 再次弹窗确认是否修改状态
        await this.$confirm(`确定要${status === 0 ? '启用' : '停用'}【${name}】的吗?`)
        await updateWareHouserAPI({ id, status: status === 0 ? 1 : 0 })
        this.$message.success('修改仓库状态成功！')
        // 刷新页面数据
        this.getPageWareHouse()
      } catch (error) {
        this.$message.info('已取消操作！')
      }
    },
    // 删除仓库功能
    async delWareHouse(id) {
      // 再次弹窗确定是否删除
      await this.$confirm('确定要删除该仓库信息吗？将无法恢复！！！')
      // 发送删除请求
      await delWareHouseAPI([id])
      // 删除成功通知
      this.$message.success('删除信息成功！')
      // 刷新页面数据
      this.getPageWareHouse()
    },
    // 处理仓库类型数据
    formatterType(row, col, val) {
      if (val === 'ZZ') {
        return '中转仓'
      } else if (val === 'JG') {
        return '加工仓'
      } else if (val === 'CB') {
        return '储备仓'
      }
    },
    // 处理仓库状态数据
    formatterStatus(row, col, val) {
      return val === 0 ? '停用' : '启用'
    },
    // 分页功能实现
    handleSizeChange() {

    },
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-pagination{
  margin-top: 20px;
}
.table{
    margin: 20px;
    .addBtn{
        margin-bottom: 20px;
    }
}
</style>
